The Goal
This documentation is for an older version of ZK. For the latest one, please click here.
The introduction of the XHTML component set is aimed to make it easy to port existent Web pages to ZUML. The ultimate goal is that all valid XHTML pages are valid ZUML pages. All Servlets handling the submitted form work as usual.
Therefore, existent XHTML pages could share the most powerful advantage that ZUML pages have: rich user interfaces. The richness could be achieved in two ways. First, you could embed Java codes to manipulate XHTML components dynamically. Second, you could add off-of-shelf XUL components into existent pages, just like you add XHTML into XUL pages.
Performance Consideration: If a portion of HTML tags are static, it is better to use the Native namespace as described in the Performance Tips chapter.
A XHTML Page Is A Valid ZUML Page
The Web page illustrated below is a simple but typical example.
<html>
<head>
<title>ZHTML Demo</title>
</head>
<body>
<h1>ZHTML Demo</h1>
<ul id="ul">
<li>The first item.</li>
<li>The second item.</li>
</ul>
<input type="button" value="Add Item" />
<br />
<input id="inp0" type="text" />
+
<input id="inp1" type="text" />
=
<text id="out" />
</body>
</html>
By naming it with the zhtml extension[1], it will be interpreted as a ZUML page by ZK loader. Then, instances of org.zkoss.zhtml.Html, org.zkoss.zhtml.Head and others are created accordingly. In other words, we created a tree of XHTML components at the server. Then, ZK renders them into a regular XHTML page and sends it back to the browser, like what we did for any ZUML pages.
Notes
- ↑ If you want every HTML pages to be ZUML pages, you could map the
.htmlextension to DHtmlLayoutServlet. Refer to in the Developer's Reference for details.
Server-Centric Interactivity
As being a ZUML page, it could embed any Java codes and execute them in the server as follows.
<html xmlns:zk="http://www.zkoss.org/2005/zk">
<head>
<title>ZHTML Demo</title>
</head>
<body>
<h1>ZHTML Demo</h1>
<ul id="ul">
<li>The first item.</li>
<li>The second item.</li>
</ul>
<input type="button" value="Add Item" zk:onClick="addItem()" />
<br />
<input id="inp0" type="text" zk:onChange="add()" />
+
<input id="inp1" type="text" zk:onChange="add()" />
=
<text id="out" />
<zscript>
<![CDATA[
void addItem() { Component li = new Raw("li");
li.setParent(ul); new Text("Item"+ul.getChildren().size()).setParent(li); }
void add()
{
int firstValue = inp0.getValue().equals("") ? 0 : Integer.parseInt(inp0.getValue());
int secondValue = inp1.getValue().equals("") ? 0 : Integer.parseInt(inp1.getValue());
int total = firstValue + secondValue;
out.setValue(total.toString());
}
]]>
</zscript>
</body>
</html>
In the above example, we use the ZK namespace to specify the onClick property. It is necessary because XHTML itself has a property with the same name.
It is interesting to note that all Java codes are running at the server. Thus, unlike JavaScript you are used to embed in HTML pages, you could access any resource at the server directly. For example, you could open a connection to a database and retrieve the data to fill in certain components.
<zscript>
import java.sql.*;
void addItem() {
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String url = "jdbc:odbc:Fred";
Connection conn = DriverManager.getConnection(url,"myLogin", "myPassword");
...
conn.close();
}
</zscript>
Servlets Work As Usual
In traditional Web applications, a XHTML page usually submits a form to a specific servlet for processing. You don't need to modify them to port the page to ZK.